নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।
এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ
| খেলোয়াড়ের নাম | দলীয় অবস্থান | দেশ |
|---|---|---|
| মাশরাফি বিন মুর্তজা | ক্যাপ্টেন এবং বোলার | বাংলাদেশ |
| সাকিব আল হাসান | অলরাউন্ডার | বাংলাদেশ |
| ডু প্লেসিস | ক্যাপ্টেন এবং ব্যাটসম্যান | দক্ষিন আফ্রিকা |
| বিরাট কোহলি | ব্যাটসম্যান | ভারত |
| প্রোপার্টি | বর্ণনা |
|---|---|
border | একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য একটি শর্টকাট প্রোপার্টি। |
border-collapse | টেবিলের বর্ডার কলাপ্স হবে কিনা তা নির্ধারণ করে। |
border-spacing | পাশাপাশি দুটি সেলের বর্ডারের দূরত্ব নির্ধারণ করে। |
caption-side | টেবিল ক্যাপশনের অবস্থান নির্ধারণ করে। |
empty-cells | একটি টেবিলের মধ্যে খালি সেল এর বর্ডার এবং ব্যাকগ্রাউন্ড প্রদর্শিত হবে কিনা তা নির্ধারণ করে। |
table-layout | একটি টেবিলের লেআউট নির্ধারণ করে। |
< table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border: 2px solid green;
}
</style>
</head>
<body>
<h3 >টেবিলের মধ্যে বর্ডারের ব্যবহার</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র < table> এর চারপাশে বর্ডার আছে। কিন্তু < th> এবং < td> এলিমেন্টে কোনো বর্ডার নাই।
< table>, < th> এবং < td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, th, td {
border: 2px solid green;
}
</style>
</head>
<body>
<h3>সম্পূর্ণ টেবিলে বর্ডার দিয়ে দেখানো হলো</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ <table>, <th> এবং <td> তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে।
টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য border-collapse প্রোপার্টিটি ব্যবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, th, td {
border: 2px solid green;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>টেবিল বর্ডার কলাপ্সের উদাহরণ</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>উপরের উদাহরনে border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।
টেবিলের < th> এবং < td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।
ডিফল্টভাবে < th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং < td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।
নিচের উদাহরনে < th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, th, td {
border: 2px solid green;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h3>টেবিলে text-align প্রোপার্টির ব্যবহার</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন। < th> এবং < td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom।
টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যাবহার করা হয়।
নিচের উদাহরনে < table> এর প্রস্থ সেট করা হয়েছে 100% এবং < th> এলিমেন্টের height সেট করা হয়েছে 50px।
kt_satt_skill_example_id=707
টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য < th> এবং < td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।
টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য < th> এবং < td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।
kt_satt_skill_example_id=714
নিচের উদাহরণে < th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ
kt_satt_skill_example_id=720
টেবিলকে জেব্রা স্টাইল করতে হলে nth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।
kt_satt_skill_example_id=738
টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য < tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।
kt_satt_skill_example_id=732
টেবিলকে রেস্পন্সিভ করার জন্য <table> এলিমেন্টকে <div> এলিমেন্টের মধ্যে রেখে <div> এলিমেন্টে overflow-x: auto প্রোপার্টি ব্যবহার করুন।
kt_satt_skill_example_id=736
বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন।
Read more
or
